<template>
	<div>
		<el-table :data="tableData" border stripe>
			<el-table-column
				v-if="columnObj.selection"
				type="selection"
				:selectable="columnObj.selectable"></el-table-column>
			<el-table-column
				v-for="(column, index) in columnObj.columnData"
				:key="index"
				:label="column.label"
				:prop="column.prop"
				:align="column.align || 'center'"
				:width="column.width"
				:fixed="column.fixed"
				:sortable="column.sortable"
				:index="index">
				<template slot-scope="{ row, $index }">
					<!-- 默认展示 -->
					<span v-if="column.text && column.editRow != $index">
						{{ row[column.prop] }}
					</span>
					<!-- 状态对象展示 -->
					<span v-if="column.status && rwo[column.prop]">
						{{ row[column.prop].msg }}
					</span>
					<!-- 自定义内容 -->
					<span v-if="column.ownDefined">
						{{ column.ownDefinedReturn(row, $index) }}
					</span>
					<!-- 操作按钮 -->
					<span
						v-if="column.isOperation"
						v-for="(operations, index) in column.operation"
						:key="index">
						<el-button :type="operation.type">
							{{ operations.label }}
						</el-button>						
					</span>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
export default {
	name: "DataTable",
	props: {
		tableData: {
			type: Array,
			required: true,
		},
		columnObj: {
			type: Object,
			required: true,
		},
		pageObj: {
			type: Object,
			required: true,
		},
	},
	data() {
		return {};
	},

	mounted() {},

	methods: {},
};
</script>

<style lang="scss" scoped></style>
